<template>
  <q-item
    clickable
    v-bind="linkProps"
  >
    <q-item-section
      v-if="icon"
      avatar
    >
      <q-icon :name="icon" />
    </q-item-section>

    <q-item-section>
      <q-item-label>{{ title }}</q-item-label>
      <q-item-label caption>{{ caption }}</q-item-label>
    </q-item-section>
  </q-item>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },

  caption: {
    type: String,
    default: ''
  },

  link: {
    type: String,
    default: '#'
  },

  icon: {
    type: String,
    default: ''
  }
})

const linkProps = computed(() => {
  if (props.link.startsWith('http')) {
    return {
      href: props.link,
      target: '_blank',
      rel: 'noopener noreferrer' // Added for security
    }
  }

  // Add exact prop for the home page link to avoid it staying active on other routes
  const isHomePage = props.link === '/'
  return { 
    to: props.link,
    exact: isHomePage
  }
})
</script>
